import { useState, useEffect } from "react";
import { Form, Alert, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { sortingBoxRelease } from "../../service";
import Typography from "@/pages/OrderModule/common/components/Typography";

const ProductAbnormalModal = ({ visible, fetchList, selectedKeys, selectedRows, handleOk, handleCancel }) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [uniqueCodeNum, setUniqueCodeNum] = useState(false); //去支付弹窗

	useEffect(() => {
		let evenNumbers = selectedRows.filter(function (item) {
			return item.uniqueCode !== "";
		});
		setUniqueCodeNum(evenNumbers.length);
		if (visible) {
			form.resetFields();
		}
	}, [visible]);

	const onOk = () => {
		form.validateFields().then(async value => {
            console.log('selectedRows123', selectedRows)
			const { success } = await sortingBoxRelease(
			   selectedRows.map(item => item.outboundNo)
			);
			if (success) {
				message.success("操作成功");
				fetchList();
				onCancel();
			}
			setLoading(false);
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};

	return (
		<CommonModal title={{ title: "释放分拣筐" }} visible={true} onOk={onOk} width={"391px"} onCancel={onCancel} minHeight="150px">
			<Form form={form} name="mark-unuaual-modal">
				<Alert
					showIcon
					message={<Typography as="s1">若确定释放 则对应订单的分拣状态、已分拣商品数据将会被清空需要从新分拣</Typography>}
				/>
				<div style={{ marginTop: 16 }}>
					<span style={{ color: "rgba(51, 51, 51, 1)" }}>本次将释放的订单数：</span>
					<span style={{ color: "rgba(240, 61, 41, 1)" }}>{selectedKeys.length}</span>
				</div>
				<div style={{ marginTop: 16 }}>
					<span style={{ color: "rgba(51, 51, 51, 1)" }}>确定释放所选订单吗？</span>
				</div>
			</Form>
		</CommonModal>
	);
};

export default ProductAbnormalModal;
